<template>
  
<!-- <el-tooltip
      class="box-item"
      effect="dark"
      content="全屏"
      placement="bottom"
    > -->
    <div>
    <svg-icon :icon="icon" @click="onToggle"  id="guide-fullscreen"></svg-icon>
  </div>
<!-- </el-tooltip> -->


</template>

<script setup>
import { computed, ref ,onMounted,onUnmounted} from "vue";
import screenfull from 'screenfull';
const isFullScreen = ref(false);

const icon = computed(() => {
  return isFullScreen.value ? "exit-fullscreen" : "fullscreen";
});

const onToggle = ()=>{
		screenfull.toggle();
}

const change = () => {
  isFullScreen.value = !isFullScreen.value
}

onMounted(() => {
  screenfull.on("change",change)
})
onUnmounted(() => {
  screenfull.off('change',change)
})



</script>
<style lang="scss" scoped>
</style>